<title>vX Tests/Demos</title>
<h1>vX Tests/Demos</h1>

<h2>Ajax</h2>
<a href="javascript:void(0)" id="ajax">Click here</a> to find out the size of the original modules of the vX Javascript Library using vX Ajax.<br>
<span>Size: </span><span id="vxs">Why dont you try finding out? (not this has not been updated)</span>

<h2>JSON</h2>
<a href="javascript:void(0)" id="urlencode">Click here</a> to see queryencoded json.<br>
<a href="javascript:void(0)" id="stringify">Click here</a> to see stringified json.<br>

<h2>Events</h2>
<a href="javascript:void(0)" id="events">Click here</a> to test if events work.<br>
<a href="javascript:void(0)" id="remevents">Click here</a> to remove above link's handler.<br>

<h2>HTML Entities</h2>
<a href="javascript:void(0)" id="entenc">Click here</a> to encode HTML entities.<br>
<a href="javascript:void(0)" id="entdec">Click here</a> to decode HTML entities.<br>

<h2>Templating</h2>
<a href="javascript:void(0)" id="template">Click here</a> to test out Templating.<br>
<a href="javascript:void(0)" id="template2">Click here</a> to test out Templating (again).<br>

<h2>Class Names</h2>
<a href="javascript:void(0)" id="class1">Click here</a> to find elements with the "fxl" class<br>
<a href="javascript:void(0)" id="class2">Click here</a> to find elements with the "fx" class<br>

<h2>Strings</h2>
<a href="javascript:void(0)" id="strtrim">Click here</a> to trim text<br>

<h2>Script Loader</h2>
<a href="javascript:void(0)" id="scriptload">Click here</a> to load something<br>
<a href="javascript:void(0)" id="scriptload2">Click here</a> to load Firebug Lite!<br>

<h2>Drop-Down Menu</h2>
<style>
  .top_menu {
    background-color: #E0E0E0;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 26px;
    border: 1px solid black;
  }
  .top_menu ul {
    margin-top: 3px;
    padding-left: 0;
    clear: both;
    float: left;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
  }
  .top_menu ul li {
    display: inline;
    float: left;
    margin: 0;
  }
  .top_menu ul li a {
    padding: 5px;
    text-decoration: none;
    color: black;
    
  }
  .top_menu ul li a:hover {
    background-color: orange;
  }

  .dd_menu {
    border: 1px solid gray;
    border-top: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    visibility: hidden;
    background-color: #E0E0E0;
  }
  .dd_menu li {
    color: white;
    display: block !important;
    float: none !important;
  }
</style>
<div class="top_menu">
  <ul>
    <li><a id="handle_vxjs">vXJS</a>
      <ul class="dd_menu" id="menu_vxjs" style="z-index: 42;">
	<li><a href="http://code.google.com/p/vxjs/wiki/vxCore">Documentation</a></li>
	<li><a href="build.htm">Build</a></li>
	<li><a href="test.htm">Test Cases</a></li>
      </ul>
    </li>
    <li><a id="handle_docs">Docs</a>
      <ul class="dd_menu" id="menu_docs" style="z-index: 42;">
	<li><a href="http://code.google.com/p/vxjs/wiki/vxCore#Stringify:_JSON_Encoding">JSON</a></li>
	<li><a href="http://code.google.com/p/vxjs/wiki/vxCore#Templates:_Templates">Templating</a></li>
	<li><a href="http://code.google.com/p/vxjs/wiki/vxCore#Ajax:_AJAX_Query">Ajax</a></li>
      </ul>
    </li>
  </ul>
  <div style="clear: both"></div>
</div>
  
<h2>Auto Fill</h2>
Normal Autofill.<br>
<input type="text" id="autofill">
<ul id="autofillbox" style="position:absolute;display:none;margin:0;padding:0;z-index:1337;border:1px solid #808080;background-color:#D3D3D3;overflow:auto;max-height:272px">
</ul>
<br>
Multi Item Autofill.<br>
<input type="text" id="multifill" style="width:500px;">
<ul id="multifillbox" style="position:absolute;display:none;margin:0;padding:0;z-index:1337;border:1px solid green;background-color:#7CEC00;overflow:auto;max-height:272px">
</ul>

<h2>Position</h2>
<a href="javascript:void(0)" id="postl">Where am I?</a><br>
<a href="javascript:void(0)" id="poswh">Am I fat?</a><br>

<h2>Animation</h2>
<a href="javascript:void(0)" class="fxl" id="fadeout">Click here</a> to fade out the following block.<br>
<a href="javascript:void(0)" class="fxl" id="fadein">Click here</a> to fade in the following block.<br>
<a href="javascript:void(0)" class="fxl" id="slideup">Click here</a> to slide up the following block.<br>
<a href="javascript:void(0)" class="fxl" id="slidedown">Click here</a> to slide down the following block.<br>

<a href="javascript:void(0)" class="fxl" id="infadeslide">Click here</a> to fade out and slide up the following block.<br>
<a href="javascript:void(0)" class="fxl" id="outfadeslide">Click here</a> to fade in and slide down the following block.<br>
<br>
<div style="height: 100px;">
<div id="fx" class="fx" style="width: 200px; height: 100px; background-color: rgb(0, 255, 0)"></div>
</div>
<script type="text/javascript" src="lib/vx.all.js"></script>

<script type="text/javascript" src="ext/menu.js"></script>
<script type="text/javascript" src="ext/autofill.js"></script>

<script type="text/javascript">

_.E(_.G("ajax"), "click", function(){
  _.G("vxs").innerHTML = "Checking...";
  //you understand I could just do one request to vx.all.js and get that size. but I dont feel like it.
  var count = 0;
  var files = ["vx.js","vx.ajax.js","vx.event.js","vx.anim.js","vx.queryencode.js","vx.fade.js","vx.stringify.js","vx.clone.js"];
  var done = 0;
  
  for(var i = 0; i < files.length; i++){
    _.X("lib/"+files[i],function(e){
      count+=e.length;
      done++;
      _.G("vxs").innerHTML = "Checking... "+done+"/"+files.length+"...";
      if(done >= files.length){
        _.G("vxs").innerHTML = (count/1000)+"kb";
      }
    })
  }
  return false
})

_.E(_.G("fadein"), "click", function(){
  _.F("in", _.G("fx"))
})

_.E(_.G("fadeout"), "click", function(){
  _.F("out", _.G("fx"))
})

_.E(_.G("slideup"), "click", function(){
  _.slide(0, _.G("fx"),function() //slide out
  {
     _.G("fx").style.height = '100px'; //hi
     _.G("fx").style.visibility = "hidden" //scary!
  })
})

_.E(_.G("slidedown"), "click", function(){
  _.G("fx").style.visibility = 'visible'; //yay for light
  _.slide(1, _.G("fx"),function() //slide in
  {
     _.G("fx").style.height = '100px'; //reset height
  })
})


_.E(_.G("infadeslide"), "click", function(){
  _.F("out", _.G("fx"))
  _.slide(0, _.G("fx"),function() //slide out
  {
     _.G("fx").style.height = '100px'; //hi
     _.G("fx").style.visibility = "hidden" //scary!
  },50)
})

_.E(_.G("outfadeslide"), "click", function(){
  _.F("in", _.G("fx"))
  _.G("fx").style.visibility = 'visible'; //yay for light
  _.slide(1, _.G("fx"),function() //slide in
  {
     _.G("fx").style.height = '100px'; //reset height
  },50)
})

_.E(_.G("urlencode"), "click", function(){
  alert(_.Q({
    you: "suck",
    howmuch: "alot"
  }))
})

_.E(_.G("stringify"), "click", function(){
  alert(_.S({
    hello: "world!",
    recurse:
      {
        awesome: "true"
      }
  }))
})

_.E(_.G("template"), "click", function(){
  alert(_.M("Hello {name}! I {verb} your {noun}.",
  {
    name: prompt("Enter A Name"),
    verb: prompt("Enter a Past Tense Verb"),
    noun: prompt("Enter a Noun")
  }
  ))
})

_.E(_.G("strtrim"), "click", function(){
  alert(_.trim(prompt("enter a string with trailing or prepended whitepace to trim!","     poooop    ")));
  
})

_.E(_.G("template2"), "click", function(){
  alert(_.M("vX is being {verb} by {noun}, becasue of its {verb2} {adjective}ness.",
  {
    verb: prompt("Enter a Past Tense Verb"),
    verb2: prompt("Enter a Verb"),
    adjective: prompt("Enter an adjective"),
    noun: prompt("Enter a Noun")
  }
  ))
})


_.E(_.G("scriptload"),"click", function(){
  _.include("http://vxjs.googlecode.com/svn-history/r266/trunk/scriptloadtest.js");
})

//http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js

_.E(_.G("scriptload2"),"click", function(){
  _.include("http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js");
  (function(){
  if(window.firebug && window.firebug.version){
  firebug.init();
  }else{
  setTimeout(arguments.callee);
  }})();
})

_.E(_.G("entdec"), "click", function(){
  alert(_.H("&lt;moo&gt;&lt;poo&gt;",true));
})

_.E(_.G("entenc"), "click", function(){
  alert(_.H("<moo><poo>"));
})

_.E(_.G("class1"), "click", function(){
  alert(_.C("fxl").length)
})

_.E(_.G("class2"), "click", function(){
  alert(_.C("fx").length)
})


_.E(_.G("poswh"), "click", function(){
  var pos = _.P(_.G("poswh"));
  alert("Width: "+pos.w);
  alert("Height: "+pos.h);
})

_.E(_.G("postl"), "click", function(){
  var pos = _.P(_.G("postl"));
  alert("Top: "+pos.t);
  alert("Left: "+pos.l);
})

new_autofill(_.id("autofill"), _.id("autofillbox"),"ext/words.txt?query={string}")

new_autofill(_.id("multifill"), _.id("multifillbox"),"ext/words.txt?query={string}",null,"multi")

_.ready(function() {
  new_dropdown(_.G("menu_vxjs"), _.G("handle_vxjs"));
  new_dropdown(_.G("menu_docs"), _.G("handle_docs"));
});

var handler = function(){
  alert("You see this because events are working")
}

_.E(_.G('events'), "click", handler);
_.E(_.G("remevents"), "click", function(){ //on event
  alert("Hai! Me Removing Events!");
  _.E(_.G('events'), "click", handler, true); //..remove event
})

</script>
